<template>
	<view class="feedback-list">
		<view class="relic-list">
			<view class="" v-for="(item,index) in list" :key="index">
				<view class="flex-between-center">
					<view class="feedback-type">{{$common.selectDictLabel(typeOptions,item.type) || '-'}}</view>
					<view class="color-999 font-s-12">{{item.createTime}}</view>
				</view>
				<view class="mar-t-15">
					<u-parse :html="item.content"></u-parse>
				</view>
				<view class="img-box" v-if="item.url">
					<view v-for="(item2,index2) in JSON.parse(item.url)" :key="index2" class="pic-item">
						<u-image v-if="item2" :src="item2.url" width="144" height="144" border-radius="8" @click="$common.previewImage(item.url,index2)"></u-image>
					</view>
				</view>
				<view class="reply-box">
					<view class="flex-between-center">
						<view :class="item.leaveStatus?'color-green':'color-orange'">{{item.leaveStatus?'已处理':'待处理'}}</view>
						<view class="color-999 font-s-12">{{item.leaveTime}}</view>
					</view>
					<view class="reply-content" v-if="item.leaveContent">
						<u-parse :html="'处理回复：'+(item.leaveContent || '暂无回复')"></u-parse>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" v-if="list.length || status!='nomore'"/>
		<empty text="暂无历史反馈" v-else></empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeOptions:[],
				list: [],
				queryParams: {
					pageNum: 1,
					pageSize: 15
				},
				status: 'loading'
			}
		},
		onLoad() {
			this.getDicts()
			this.getList()
		},
		onReachBottom() {
			if(this.status === 'loadmore'){
				this.status = 'loading'
				this.getList()
			}
		},
		methods: {
			getDicts(){
				this.$request({
					url: '/system/dict/data/type/feedback_type',
					method: 'get'
				}).then(res => {
					this.typeOptions = res.data
				})
			},
			getList(){
				this.$request({
					url: '/loginUserInfo/selectUserFeedbackPage',
					method: 'get',
					data:this.queryParams
				}).then(res => {
					if(res.code===200){
						this.list = this.list.concat(res.data.records)
						if(res.data.records.length<this.queryParams.pageSize){
							this.status = 'nomore'
						}else{
							this.status = 'loadmore'
							this.queryParams.pageNum++
						}
					}
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #F5F7FA;
	}
</style>
<style lang="scss" scoped>
	.feedback-list {
		padding: 24rpx 24rpx 48rpx;
		.relic-list{
			margin-bottom: 24rpx;
			>view{
				border-radius: 24rpx;
				background-color: #fff;
				margin-bottom: 24rpx;
				padding: 24rpx;
				position: relative;
				.feedback-type{
					padding: 0 16rpx;
					height: 48rpx;
					line-height: 48rpx;
					background: rgba(41,126,255,0.08);
					border-radius: 24rpx;
					color: #517AB8;
					font-size: 28rpx;
				}
				.img-box{
					display: flex;
					flex-wrap: wrap;
					>view{
						margin: 24rpx 24rpx 0 0;
						&:nth-child(4n){
							margin-right: 0;
						}
					}
				}
				.reply-box{
					border-top: 1rpx dashed #eee;
					margin-top: 24rpx;
					padding-top: 24rpx;
					.reply-content{
						background: #f5f5f5;
						border-radius: 12rpx;
						margin-top: 24rpx;
						padding: 24rpx;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>